<template>
  <base-breadcrumb>
    <a-form @submit="handleSubmit" :form="form">
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <div class="title-name">多栏表单</div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="项目名称"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput
                v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label="负责人"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput v-decorator="['name',{rules: [{ required: true, message: ' ' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="所属区域"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput
                v-decorator="[
              'name',
              {rules: [{ required: true, message: ' ' }]}
            ]"
                name="name"
                placeholder=" " />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label=" 归属部门"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <BaseInput v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder="给目标起个名字" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="生效时间"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-date-picker   v-decorator="['name',{rules: [{ required: true, message: ' ' }]}]"  style=" " placeholder="请输入生效时间"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="12">
            <a-form-item
              label=" 合同上传"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }">
              <a-upload
                name="file"
                :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                v-decorator="['date',{rules: [{ required: true, message: ' ' }]}]"
                @change="handleChange">
                <a-button> <a-icon type="upload" style="color: #1890ff" /> 上传文件 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card :body-style="{padding: '24px 32px'}" :bordered="false" style="margin-top: 20px">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <div class="title-name">单栏表单</div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="项目名称"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="负责人"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput
                v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="所属部门"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput
                v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
        </a-row>

      </a-card>

      <a-card :body-style="{padding: '24px 32px'}" :bordered="false" style="margin-top: 20px">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <div class="title-name">合同信息</div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="所属区域"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <BaseInput
                v-decorator="['name',{rules: [{ required: true, message: '请输入标题' }]}]"
                placeholder=" " />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="合同上传"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-upload
                name="file"
                :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :headers="headers"
                @change="handleChange">
                <a-button> <a-icon type="upload" style="color: #1890ff" /> 上传文件 </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="上传营业执照"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange1"
              >
                <div v-if="fileList.length < 8">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">
                    Upload
                  </div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <!--<a-row :gutter="24">-->
          <!--<a-col :md="12" :sm="12">-->
            <!--<a-project-item-->
              <!--label="权重"-->
              <!--:labelCol="{lg: {span: 5}, sm: {span: 5}}"-->
              <!--:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"-->
              <!--:required="false"-->
            <!--&gt;-->
              <!--<BaseInputNumber :min="0" :max="100" />-->
              <!--<span> %</span>-->
            <!--</a-project-item>-->
          <!--</a-col>-->
        <!--</a-row>-->
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-item
              label="是否公开"
              :labelCol="{lg: {span: 5}, sm: {span: 5}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }"
              :required="false"
              help=""
            >
              <a-radio-group v-decorator="['target', { initialValue: 1 }]">
                <a-radio :value="1">公开</a-radio>
                <a-radio :value="2">部分公开</a-radio>
                <a-radio :value="3">不公开</a-radio>
              </a-radio-group>
              <a-form-item v-show="form.getFieldValue('target') === 2">
                <a-select mode="multiple">
                  <a-select-option value="4">同事一</a-select-option>
                  <a-select-option value="5">同事二</a-select-option>
                  <a-select-option value="6">同事三</a-select-option>
                </a-select>
              </a-form-item>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
    <!-- fixed footer toolbar -->
    <!--<footer-tool-bar >-->
        <!--<a-button type="primary" @click="validate" >提交</a-button>-->
    <!--</footer-tool-bar>-->
  </base-breadcrumb>
</template>

<script>
  // 演示如何使用 this.$dialog 封装 modal 组件
  import TaskForm from '../../list/modules/TaskForm'
  export default {
    name:'a'+Date.now(),
    components: {
    },
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [
          {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          }],

        headers: {
          authorization: 'authorization-text',
        },
        queryParam: {
          projectName: '',
          name: ''
        },
        form: this.$form.createForm(this),
        status: 'all'
      }
    },
    created(){
    },

    methods: {
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$notification['error']({
              message: 'Received values of project:',
              description: values
            })
          }
        })
      },
      handleCancel() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange1({ fileList }) {
        this.fileList = fileList;
      },
      // 上传
      handleChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },
      add() {
        this.$dialog(TaskForm,
          // component props
          {
            record: {},
            on: {
              ok() {
                console.log('ok 回调')
              },
              cancel() {
                console.log('cancel 回调')
              },
              close() {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '新增',
            width: 700,
            centered: true,
            maskClosable: false
          })
      },
      edit(record) {
        console.log('record', record)
        this.$dialog(TaskForm,
          // component props
          {
            record,
            on: {
              ok() {
                console.log('ok 回调')
              },
              cancel() {
                console.log('cancel 回调')
              },
              close() {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '操作',
            width: 700,
            centered: true,
            maskClosable: false
          })
      },
      validate () {
        const _this = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          // 验证表单没错误
          if (!err) {
            console.log('project values', values)

            _this.confirmLoading = true
            // 模拟后端请求 2000 毫秒延迟
            new Promise((resolve) => {
              setTimeout(() => resolve(), 2000)
            }).then(() => {
              // Do something
              _this.$message.success('保存成功')
              _this.$emit('ok')
            }).catch(() => {
              // Do something
            }).finally(() => {
              _this.confirmLoading = false
              _this.close()
            })
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .wrapper-row{
    padding-left: 55px;
    font-weight: bold;
    letter-spacing: 1px;
  }
  /deep/ .ant-btn{
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker-input.ant-input{
    width: 100%;
  }
  /deep/ .ant-input{
    width: 70%;
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker{
    width: 70%;
    border-radius: 5px;
  }
  /deep/ .ant-card.ant-card-bordered{
    border-radius: 5px;
  }
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
      line-height: 20px;
    }
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
    padding-left: 80px;
  }
</style>
